<template>
  <div>
    <h2>app-info: {{ info }}</h2>
    <show-info :roInfo="roInfo" :info="info" @changeroInfoname="changereinfo" @changeInfo="changeInfo"></show-info>
  </div>
</template>
<script>
import { reactive, ref, readonly} from "vue";
import ShowInfo from "./ShowInfo.vue";
export default {
  components: { ShowInfo },
  setup() {
    // 本地定义多个数据,都需要传递给子组件
    // name / age/ height
    let info = reactive({
      name: "inzv",
      age: 18,
      height: 188,
    });
    const changeInfo = (value) => {
        console.log(value,'子组件传的值');
      info.name = value.name;
      info.age = value.age;
      info.height = value.height;
    };

    // 使用readonly 包裹info
    let roInfo = readonly(info);
    
    const changereinfo = (value) => {
        console.log(value,'子组件传的值');
      info.name = value;
    };

    return { info, changeInfo, roInfo, changereinfo };
  },
};
</script>
<style scoped>
/*局部css 支持css3 可以改变elementUI组件的样式 且组件样式调整只在本页面生效**/
/*主样式*/
</style>
